<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item to="/admin/home">首页</el-breadcrumb-item>
      <el-breadcrumb-item to="/admin/user">用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加用户</el-breadcrumb-item>
      <el-button class="back" type="primary" size="mini" @click="$router.back()">返回</el-button>
    </el-breadcrumb>
    <el-card>
      <el-form ref="userform" :model="userForm" :rules="userRules" label-width="100px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userForm.username" placeholder="请输入用户名" prefix-icon="el-icon-user"></el-input>
        </el-form-item>
        <el-form-item label="用户头像" prop="avatar">
          <el-upload
            class="upload_avator"
            action="#"
            :headers="headers"
            :auto-upload="false"
            :file-list="fileList"
            :on-change="handleChange"
            multiple
            :limit="1"
            accept=".png, .jpg, .JPG, .JPEG, .jpeg, .PNG .GIF, .gif"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传图片文件,且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="userForm.password" placeholder="请输入用户密码" show-password prefix-icon="el-icon-lock"></el-input>
        </el-form-item>
        <el-form-item label="是否管理员" prop="ismanager">
          <el-select v-model="userForm.ismanager" placeholder="请选择用户权限">
            <el-option label="游客" value="0"></el-option>
            <el-option label="管理员" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="添加用户">
          <el-button type="primary" @click="addUsers">添加</el-button>
          <el-button @click="cancelAddUser">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'BackEndAddUser',

  data() {
    return {
      userForm: {
        username: '',
        password: '',
        ismanager: '',
        avatar: ''
      },
      userRules: {
        username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
        ismanager: [{ required: true, message: '请选择是否管理员', trigger: 'change' }]
        // avatar: [{ required: true, message: '请上传头像', trigger: 'change' }]
      },
      category: [],
      fileList: [],
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }
  },

  mounted() {},

  methods: {
    addUsers() {
      if (this.userForm.avator == '') {
        this.$message({
          type: 'error',
          message: '请上传用户头像',
          duration: 1000
        })
      }
      this.$refs['userform'].validate(valid => {
        if (valid) {
          //验证通过
          this.$http
            .post('/users/postuser', {
              username: this.userForm.username,
              password: this.userForm.password,
              ismanager: this.userForm.ismanager,
              avatar: this.userForm.avatar
            })
            .then(res => {})
          this.$message({
            type: 'success',
            message: '添加用户成功',
            duration: 500
          })
          this.$refs['userform'].resetFields()
          this.$router.push('/admin/user')
          this.fileList = []
        }
      })
    },
    cancelAddUser() {
      this.$refs['userform'].resetFields()
    },
    handleChange(file, fileList) {
      this.fileList = fileList
      var param = new FormData()
      this.fileList.forEach((val, index) => {
        param.append('file', val.raw)
      })
      this.$http
        .post('/users/upload', param)
        .then(res => {
          this.userForm.avatar = res.path
          this.$message({
            type: 'success',
            message: '上传用户头像成功',
            duration: 1000
          })
        })
        .catch(err => {})
    }
  }
}
</script>

<style scoped>
.el-input {
  width: 220px;
}
.back {
  position: relative;
  top: -6px;
}
.el-card {
  /* width: 500px; */
  height: 550px;
}
</style>
